<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <title>动态发光文字效果</title>
    <style>
        .app {
            width: 100%;
            height: 100vh;
            background-color: #000;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .dynamic-text {
            width: 166px;
            height: 40px;
            position: relative;
            display: flex;
            cursor: default;
        }

        .default-text,
        .hover-text {
            font-size: 2em;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 600;
            color: #ffffff;
            letter-spacing: 3px;
            position: absolute;
        }

        .hover-text {
            width: 0;
            border-right: 4px solid pink;
            overflow: hidden;
            transition: all 0.3s linear;
        }

        .dynamic-text:hover .hover-text {
            width: 100%;
            color: pink;
            box-shadow: 0 0 60px pink;
            text-shadow: 0 0 24px pink;
            animation: text-eff-87 1.8s linear infinite;
            animation-delay: 0.3s;
        }

        @keyframes text-eff-87 {
            0% {
                box-shadow: 0 0 60px pink;
                text-shadow: 0 0 24px pink;
            }

            50% {
                box-shadow: 0 0 30px pink;
                text-shadow: 0 0 12px pink;
            }

            100% {
                box-shadow: 0 0 60px pink;
                text-shadow: 0 0 24px pink;
            }
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="dynamic-text">
            <span class="default-text">&nbsp;SCIENCE &nbsp;</span>
            <span class="hover-text">&nbsp;SCIENCE&nbsp;</span>
        </div>
    </div>
</body>

</html>